import React, { FC } from 'react';
import { Button, Col, Row } from 'antd';
import { ImportOutlined } from '@ant-design/icons';
import styles from './index.less';

// eslint-disable-next-line react/require-default-props
const Groups: React.FC<{ onClick?: any; value?: any; span?: number; isEdit?: boolean }> = ({
  onClick,
  value,
  span = 22,
  isEdit = true,
}) => {
  return (
    <Row>
      <Col span={24 - span} />
      <Col span={span}>
        <span className={styles.nameIcon_title}>{value}</span>
        {isEdit ? (
          <Button type="link" className={styles.nameIcon_btn} onClick={onClick}>
            <ImportOutlined />
          </Button>
        ) : (
          ''
        )}
      </Col>
    </Row>
  );
};

export default Groups;
